<template>
    <div class="station-form-container">
        <n-card :bordered="false">
            <!-- 页面标题 -->
            <h2>更新目标站</h2>

            <!-- 站点表单 -->
            <n-form ref="formRef" :model="data_form" :rules="data_rules" layout="vertical" label-placement="left"
                label-width="120px" :style="{ maxWidth: '300px' }">

                <n-form-item label="AGV编号" path="agv_index">
                    <n-select v-model:value="data_form.agv_index" placeholder="请选择AGV编号" :options="agv_options" />
                </n-form-item>

                <n-form-item label="目标站" path="node_to_id">
                    <n-select v-model:value="data_form.node_to_id" placeholder="请选择目标站" :options="node_options" />
                </n-form-item>

                <!-- 操作按钮 -->
                <div class="form-actions">
                    <n-button @click="handleCancel">取消</n-button>
                    <n-button type="primary" :loading="loading" @click="handleSubmit">提交</n-button>
                </div>
            </n-form>
        </n-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { NCard, NForm, NFormItem, NInput, NSelect, NInputNumber, NButton, useMessage } from "naive-ui";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import { API_URLS } from '../../utils/apiConfig';

const router = useRouter()
const route = useRoute()
const message = useMessage();

const agv_options = ref([])
const node_options = ref([])

const data_form = ref({
    agv_index: null,
    node_to_id: null
})

const data_rules = ref({
    agv_index: [
        { validator: (val) => val !== null, required: true, message: '请选择AGV编号', trigger: 'blur' }
    ],
    node_to_id: [
        { validator: (val) => val !== null, required: true, message: '请选择目标站', trigger: 'blur' }
    ]
})

const get_station_options = async () => {
    try {
        const response = await axios.get(API_URLS.map_node.nameList);
        if (response.data.code === 200) {
            node_options.value = response.data.data.map(item => ({
                label: item[1],
                value: item[0]
            }));
            console.log(node_options.value);
        } else {
            message.error(`获取站点名称列表失败: ${response.data.msg}`);
        }
    } catch (error) {
        message.error("获取站点名称列表失败: " + error.message);
    }
}

const get_agv_options = async () => {
    try {
        const response = await axios.get(API_URLS.agv.nameList);
        if (response.data.code === 200) {
            agv_options.value = response.data.data.map(item => ({
                label: item[1],
                value: item[0]
            }));
            console.log(agv_options.value);
        } else {
            message.error(`获取AGV编号列表失败: ${response.data.msg}`);
        }
    } catch (error) {
        message.error("获取AGV编号列表失败: " + error.message);
    }
}

onMounted(async () => {
    await get_station_options()
    await get_agv_options()

})

const handleSubmit = async () => {
    try {
        const response = await axios.patch(
            `${API_URLS.agv.update_station_to}/${data_form.value.agv_index}?node_to_id=${data_form.value.node_to_id}`,
            {},
            {
                params: {},
            }
        );
        if (response.data.code === 200) {
            message.success(response.msg);
            router.back();
        } else {
            message.error(response.msg);
        }
    } catch (error) {
        if (error.response) {
            const statusCode = error.response.status;
            const detail = error.response.data.detail || "未知错误信息";
            message.error(`更新目标站失败: ${detail} (状态码: ${statusCode})`);
        } else if (error.request) {
            message.error("网络错误: ", error.message);
        } else {
            message.error("其他错误: " + error.message);
        }
    }
}

</script>
